<template>
    <div class="header block">
        <div class="detail">
            <div class="search">
                <el-date-picker v-model="payDateSolt" type="daterange" class="date-solt" unlink-panels
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleCurrentChange"
                    value-format="YYYY-MM-DD" :shortcuts="shortcuts" />
                <input type="text" placeholder="请输入派遣单位/人员名称" class="input search-input" v-model="searchText"
                    @keydown.enter="search" />
                <button class="btn" @click="search">搜索</button>
                <button class="btn-white" @click="onReset">重置</button>
            </div>
        </div>
        <div class="operation">
            <export-button @export="onExportht">下载合同</export-button>
            <export-button @export="onExport">导出表格</export-button>
        </div>
    </div>
    <div class="container block">
        <div class="table">
            <el-table :data="tableData" style="width: 100%" :header-row-style="{ color: '#202536' }"
                :row-style="{ color: '#5E617D' }" @selection-change="handleSelectionChange">
                <el-table-column type="selection" />
                <el-table-column prop="companyName" label="公司名称" />
                <el-table-column prop="serveCompanyName" label="派遣单位名称" />
                <el-table-column prop="userName" label="签署人" />
                <el-table-column prop="idCardNo" label="身份证" />
                <el-table-column prop="flowName" label="合同名称" />
                <el-table-column prop="labourCost" label="工价" />
                <el-table-column prop="flowStatus" label="签署状态" :formatter="(item: { flowStatus: string }) => {
                    const obj = {
                        INIT: '已创建',
                        PART: '签署中',
                        REJECT: '拒签',
                        CANCEL: '撤回',
                        DEADLINE: '流签',
                        ALL: '签署完成'
                    }
                    return obj[item.flowStatus]
                }
                    " />
                <!--  -->
                <el-table-column prop="isSuccess" label="是否签署"
                    :formatter="(item: { isSuccess: boolean }) => (item.isSuccess ? '已签署' : '未签署')" />
                <el-table-column prop="createOn" label="发起时间" />
                <el-table-column prop="deadline" label="截止时间" />
                <el-table-column prop="flowMessage" label="签署信息" />
                <el-table-column label="操作" width="220">
                    <template #default="scope">
                        <span class="link mg-r-10" v-if="scope.row.flowType !== 20" @click="goDetail(scope.row.flowId)">
                            查看详情
                        </span>
                        <span class="link mg-r-10" v-if="scope.row.flowType !== 20" @click="onExporthtalong(scope.row.id)">
                            下载合同
                        </span>
                        <span class="mg-r-10" v-if="[scope.row.id].flowType === 20">
                            待员工补充信息
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pagination" v-model:currentPage="pageNum" v-model:page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import {
    getContractRecord,
    ContractRecordDto,
    openContractDetail
} from '@/api/contract'
import axios from 'axios'
import { downLoadFile, downloadFileAndChangeName } from '../utils/util'
import { exportContractRecord, downloadSignRecordPdfForFlows } from '@/api/export'
import store from '@/store/index'
import { shortcuts } from '@/utils/global'
export default defineComponent({
    name: 'ContractList',
    data() {
        return {
            selectht: [] as any,
            active: '全部',
            total: 0,
            pageSize: 10,
            pageNum: 1,
            tableData: [] as ContractRecordDto[],
            payDateSolt: '',
            searchValue: '',
            searchText: '',
            selects: [] as string[],
            shortcuts: shortcuts
        }
    },
    created() {
        this.handleCurrentChange()
    },
    methods: {
        handleCurrentChange() {
            getContractRecord({
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                searchText: this.searchValue,
                beginCreateTime: this.payDateSolt ? this.payDateSolt[0] : '',
                endCreateTime: this.payDateSolt ? this.payDateSolt[1] : ''
            }).then(res => {
                this.total = res.total
                this.tableData = res.list
            })
        },
        handleSizeChange() {
            this.pageNum = 1
            this.handleCurrentChange()
        },
        search() {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.handleCurrentChange()
        },
        onReset() {
            this.searchText = ''
            this.payDateSolt = ''
            this.search()
        },
        async downloadSignRecordPdfForFlowsfn(arr: any) {
            const result = await downloadSignRecordPdfForFlows({
                ids: arr
                // ids: [45236, 45240]
            }, {
                loading: false
            })
            console.log(result, 'resultresultresult')
            if (result.length > 0) {
                result.forEach((item: any) => {
                    downloadFileAndChangeName(item.url, item.name + '.' + item.type)
                })
            }
        },
        async onExportht() {
            this.downloadSignRecordPdfForFlowsfn(this.selectht)
        },
        async onExporthtalong(id:any) {
            let arr = [id]
            this.downloadSignRecordPdfForFlowsfn(arr)
        },
        async onExport() {
            const result = await exportContractRecord({
                ids: this.selects.join(','),
                searchText: this.searchValue
            }, {
                loading: true
            })
            if (!result.fileUrl && result.exportStatus === 0) {
                store.commit('getLongPollingFile', result)
            } else {
                axios({
                    url: result.fileUrl,
                    method: 'GET',
                    responseType: 'blob'
                }).then(async (response) => {
                    await downLoadFile(response, result.exportType, result.updateTime, result.remark)
                    await this.$message.success('导出成功！')
                })
            }
            // window.location.href =
            //     process.env.VUE_APP_BASE_URL +
            //         '/common/download?delete=true&fileName=' +
            //         result

            // this.$message.success('导出成功！')
        },
        handleSelectionChange(selects: { id: string }[]) {
            console.log(selects, 'selects')
            this.selects = selects.map(item => item.id)
            this.selectht = []
            selects.forEach((ele: any, i: number) => {
                if (ele.flowType !== 20) {
                    this.selectht.push(ele.id)
                }
            })
            console.log(this.selectht, 'this.selectht')
        },
        async goDetail(flowId: string) {
            const result = await openContractDetail(flowId)
            console.log(result, 'result')
            window.open(result.consoleUrl)
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.header.block
    justify-content space-between
    display flex
    padding 10px 24px
.block
    padding: 10px 24px 0;
:deep().date-solt
    width 241px
    margin-right 20px
.operation
    .btn,.btn-green
        width 113px
        height 40px
        margin-left 20px

:deep().el-tabs__header.is-top
    display inline-block
:deep().el-tabs__nav-scroll
    padding-right 20px
</style>
